<template>
  <div id="o_getCoupon">
    <!-- hello world -->
    <magic-header titleName="优惠券"></magic-header>
    <empty v-if="queryData.length === 0" message='当前没有可用的优惠券'></empty>
    <c-coupon :value="queryData" v-if="queryData.length !== 0" :limit="price" :isGetCou='true' v-on:getCoupon="getCoupon"></c-coupon>
  </div>
</template>

<script>
import magicHeader from "components/magicHeader";
import empty from "components/empty-page";
import ticket from "assets/pic_ticket_bg_y.png";
// import Order from 'services/order.service'
import cCoupon from "components/coupon";
import { receiveConpon } from "services/o_getCoupon.js";
// vuex
import appointStore from "services/appointment/appoint";

export default {
  name: "coupon",
  components: {
    cCoupon,
    magicHeader,
    empty
  },
  data() {
    return {
      ticket,
      queryData: [],
      price: ""
    };
  },
  created() {
    this.getGetCouponInfo();
  },
  methods: {
    getGetCouponInfo() {
      this.queryData = this.getQueryData(appointStore.getters.getUnReceivedCoupons);
    },
    // state 状态 [0:未开始,1:进行中(可以领取),2:进行中(已领取未使用),3:已过期,4:已使用,5:优惠券已被领完] 优惠券使用(按钮状态)
    getQueryData(unReceivedCoupons) {
      let couponList = [];
      unReceivedCoupons = unReceivedCoupons || [];
      unReceivedCoupons.forEach(unReceivedCoupon => {
        couponList.push(unReceivedCoupon.coupon);
      });
      return couponList;
    },
    getCoupon(id) {
      if (this.$.userId) {
        receiveConpon.bind(this)(
          {
            couponId: id
          },
          resp => {
            this.$.toast("领取优惠券成功");
          },
          error => {
            this.$.toast(error);
            console.log(error);
          }
        );
      } else {
        this.$.goLogin({
          name: "login"
        });
      }
    }
  }
};
</script>
<style scoped>

</style>
